import { memo } from 'react'
import { useNavigate } from 'react-router'
import { CardScroll } from '@/components/web-react'
import { Message } from '@arco-design/web-react'
import { IconExclamationCircle } from '@arco-design/web-react/icon'

function UserInfo() {
  // const navigate = useNavigate()
  const handlerOutput = () => {
    // 退出登录
    localStorage.removeItem('token')
    // 刷新当前页面

  }
  const afterNode = (
    <div className='w-full h-12 border-t text-white flex items-center select-none'>
      <div onClick={() => {Message.info('功能暂未开放')}}  className='w-1/2 text-center border-r border-r-white cursor-pointer'>切换账号</div>
      <div onClick={() => {handlerOutput()}} className='w-1/2 text-center cursor-pointer'>
        <IconExclamationCircle style={{color:'#e91e63',marginRight:8}}/>
        退出登录
      </div>
    </div>
  )
  return (
    <CardScroll addAfter={afterNode}>
        <div className="w-full h-full select-none relative pb-12 text-white">
          <div className='w-full h-auto py-2 flex flex-col items-center justify-center'>
            <span className='mb-2'><span className='text-lg mx-1'>{0}</span>米币</span>
            <div onClick={()=> {Message.info('功能暂未开放')}} className='w-1/2 h-8 leading-8 bg-primary-700  text-center rounded-full cursor-pointer'>领取米币</div>
          </div>
          <div className='w-full h-12 flex justify-around items-center border-b border-b-primary-600'>
            <span>歌单{1}</span>
            <span>关注{1}</span>
            <span>关粉丝{99+'+'}</span>
          </div>
        </div>
    </CardScroll>
  )
}

export default memo(UserInfo) // UserInfo
